function loadChartData(){
	
	if(typeof remoteChartData != "undefined"){

		// Load the chart information.	
		var chart = remoteChartData.chart;

		jQuery.extend($('#chartHolder').data('chartObject'), { 
			title: chart.name,
			description: chart.description,
			visibility: (chart.private == 0) ? 'visible' : 'hidden',
			chartID: (typeof chart.chID == "undefined") ? 0 : parseInt(chart.chID),
			groupID: (typeof chart.groupID == "undefined") ? 0 : parseInt(chart.groupID),
			bookID: (typeof chart.bookID == "undefined" || chart.bookID == null) ? 0 : parseInt(chart.bookID)
		});
		
		// Make changes visible.
		populateChartFromData();
		
		// Resize the chart area if required.
		var cellWidth = $('.cell:first').outerWidth();
		var cellHeight = $('.cell:first').outerHeight();	
			
		$('.cell:first').parent().animate({
			width: [chart.columns * (cellWidth + 10), 'swing'],
			height: [chart.rows * (cellHeight + 10), 'swing']
		});
		
		$('#chart').css('overflow', 'auto');
				
		properties.activeCells = remoteChartData.cells.length;

		// Load the cells & manipulate DOM with changes.
		$.each(remoteChartData.cells, function(index, value){
			
			var id = (index + 1);
		
			value.mulberryURL = browserDependentImage(value.mulberryURL);
		
			jQuery.extend($('.cell:nth-child(' + id + ')').data('cellObject'), {
				image: value.mulberryURL,
				text: value.text,
				bgcolour: value.bgColour,
				fontFace: value.fontFace,
				colour: value.textColour,
				frameColour: value.frameColour,
				textLocation: value.textLocation,
				textAlignment: value.textAlignment,
				textHeight: parseInt(value.textHeight),
				textSize: parseInt(value.textSize),
				PBCbold: (value.textBold == 0) ? false : true,
				PBCitalic: (value.textItalic == 0) ? false : true,
				PBCunderline: (value.textUnderline == 0) ? false : true,
				source: 'mulberry',
				imageID: value.image_imgID
			});
			
			// Copy the image to the cell
			if(value.image_imgID != "" && value.image_imgID != null){
				$('.cell:nth-child(' + id + ')').data('cellObject').image = value.imageURL;
				//$("#cell" + (index+1) + "img").append($('<img>', { src: value.imageURL }));
			}
			
			// Populate the cell
			populateCellFromData("#cell" + id + "img");
		
		});
		attachSelectables();
	}
	
}


// Load the chart data.
PicBoard.addLoadEvent( "loadChartData()" );